在正式踏入研究box model之前，我做了一些簡單Html跟CSS練習，一方面本身的確不夠熟練，一方面做中學、錯中學才能比較清楚整個流程。
我簡單示範從新建Html到CSS寫出一個box並解說過程，以及這過程中我學習了什麼，整體主軸上我希望還是以CSS為主，所以html語法上會依情況稍微帶過。
「質疑箱子，理解箱子，進去箱子。」 --我的貓。
網頁畫面如上，
目標是練習基本方框如何建立。
開一個html新檔案，內容輸入半形!會自動跑出預設格式。
html是超文本標記語言，主要是用標籤組織網頁的內容，可以將所想呈現的資訊、圖片、連結等添加進標籤內。
在練習中我對以下標籤進行編寫：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>貓咪去了哪裡</title>
<link rel = "stylesheet" href="styles.css">
</head>
<body>
<h1>欸！貓咪你不能...</h1>
<p>不行！那個箱子不行！</p>
<img src = "muna_inBox.png" alt = "箱子裡到底有沒有貓是薛丁格的貓">
<div class="box">꜀(^. .^꜀ )੭</div>
<p class="box box2">空箱子</p>
</body>
</html>
<title>貓咪去了哪裡</title>
定義顯示在瀏覽器標題欄或頁面標籤上的文件標題。(Mdn)
最簡單直觀就是瀏覽器上方分頁列上顯示的小標題。
<link rel = "stylesheet" href="styles.css">
載入CSS檔案。
<link>表示目前文件與外部資源之間的關聯性。
rel屬性代表「關係」，表示與html相連結的CSS檔案是"stylesheet"關係。
href屬性表示連結路徑。
<h1>欸！貓咪你不能...</h1>
<h1>~<h6>，代表六個層級的區段標題元素，層級由高(h1)到低(h6)，所有標題元素都會在版面配置中建立區塊層級方塊（block-level box）。
<img src = "muna_inBox.png" alt = "箱子裡到底有沒有貓是薛丁格的貓">
用於插入圖片。
src屬性是要連結的圖片檔案路徑。
alt屬性是用於替換圖片的文字訊息，若圖片無法讀取將會顯示此文字訊息。
接下來，
要特別注意區塊元素，這對之後理解box model有關。
練習裡我使用這些區塊元素：
<div class="box">꜀(^. .^꜀ )੭</div>
<div>是區塊元素的一種，
本身並不具備特定的意義或預設樣式，因此通常使用它做為一個容器，將其他具有語意含義的標籤元素包裹在其中，以表示一個區塊。
<p class="box box2">空箱子</p>
代表一個段落，也是一種區塊元素。
一般寫作文時段落指的是用空白行進行首行縮排分隔或換行符號區隔的文字段落；但 HTML 段落除了文本區塊也可以是任何相關內容的結構分組，例如：圖片或表單。
上面區塊元素後綴 class="box box2" ，class屬性用來指定這個元素的「類別名稱」，在這裡表示<div>這個區塊有兩種類別名稱，分別是"box","box2"。
補充多重類別：
html允許class屬性使用多個設定值，各個設定值要用空白符號來區隔，通常class屬性中值的順序不會有影響，但樣式規則的套用順序取決於CSS 規則的權重（specificity）和定義的順序。
如果多個規則設定了相同的CSS屬性，則權重較高、或在程式碼中後定義的規則將覆蓋權重較低的規則。
練習裡剛好有"box","box2"用來解釋，我將在後面繼續說明。
iThome鐵人賽
看影片追技術